<template>
    <section class="smartResourceManage">
    	<!-- <el-select v-model="form.segment" placeholder="请选择">
		    <el-option
		      v-for="item in segmentOptions"
		      :key="item.id"
		      :label="item.name"
		      :value="item.id">
		    </el-option>
		 </el-select> -->
    	
    	 <el-input
    	 	style="width: 180px;"
		    placeholder="搜索"
		    suffix-icon="el-icon-search"
		    v-model="form.name">
		  </el-input>
		   <el-button type="primary"  @click="search">搜索</el-button>
		   <el-button type="primary" plain plain @click="cleanSearch">清除搜索</el-button>
        
        <table-common 
        	:loading="loading"
        	style="margin: 15px 0;"
        	@detail="detail"
        	@del="del"
        	@handleCurrentChange="handleCurrentChange"
        	@peizhi="peizhi"
        	:tableTitle="tableTitle" 
        	:tableData="tableData" 
        	:total="total">
        </table-common>
        	
        
    <el-dialog
      title="配置策略"
      :visible.sync="dialogVisible1"
      width="50%"
      class="diy-dialog"
      :append-to-body="true"
    >
     <smart-resource-manage-form
     
     :id = "clickId"
     :areaInfo="areaInfo"
     :scope="scope"
     @submitForm="submitForm"
     ></smart-resource-manage-form>
    </el-dialog>
    
    
     <el-dialog
      title="Docker资源管理"
      :visible.sync="dialogVisible2"
     
      width="50%"
      class="diy-dialog"
      :append-to-body="true"
    >
     <smart-resource-manage-detail
     	 :areaInfo="areaInfo"
     	:dockerDetail = "dockerDetail"
     :id = "clickId"
     ></smart-resource-manage-detail>
    </el-dialog>
    
    </section>
</template>

<script>
    import tableCommon from "../common/tableCommon"
    import smartResourceManageForm from "./components/smartResourceManageForm"
    import smartResourceManageDetail from "./components/smartResourceManageDetail"
    import {
    	computedPostAlllSegment,
    	computedPostSearch,
    	computedGetDockerDetail,
    	computedAddDockerStragety
    } from "../css_js_img/computedSmartResource"
    export default {
    	components:{
    		tableCommon,
    		smartResourceManageForm,
    		smartResourceManageDetail,
    	},
        data() {
          return {
          		loading:true,
          		total:0,
          		clickId:0,
          		dialogVisible1:false,
          		dialogVisible2:false,
          		scope:{},
          		form:{
          			pageNum:1,
          			pageSize:10,
          			segment:'',
          			name:'',
          		},
          		tableTitle:{
          			segmentName:'所属网段',
          			name:'区域名称',
          			name3:'是否配置资源策略',
          			dockerCount:'Docker数量',
          			dockerRunCount:'正常运行',
          			dockerErrorCount:'异常数量',
          			createBy:'配置人',
          			createDate:'配置时间',
          		},
          		submitFormVal:{},
          		tableData:[],
          		dockerDetail:{},
          		areaInfo:{
          			name:"",
          			areaName:"",
          			areaId:'',
          		},
          		segmentOptions:[
          			{
          				name:'ewa',
          				id:'dw2wa',
          			},
          			{
          				name:'ewa',
          				id:'dww4a',
          			},
          			{
          				name:'ewa',
          				id:'dwwwa',
          			}
          		],
          		loadingDiy:'',
          		
          };
        },
        methods: {
        		staryLoading(){
        			  this.loadingDiy = this.$loading({
				          lock: true,
				  
				        });
        		},
        		closeLoading(){
        			 this.loadingDiy.close();
        		},
        		submitForm(val){/*提交配置表*/
        			this.staryLoading();
        			this.submitFormVal = val;
        			computedAddDockerStragety(this,this.submitFormVal);
        		},
        		cleanSearch(){
        			this.form={
        				pageNum:1,
	          			pageSize:10,
	          			segment:'',
	          			name:'',
        			}
        			computedPostSearch(this);
        		},
        		search(){
        			computedPostSearch(this);
        		},
        		detail(scope){
        			this.dialogVisible2 = true;
        			this.areaInfo.name = scope.row.segmentName;
        			computedGetDockerDetail(this,scope.row.id);
        		},
        		peizhi(scope){
        			console.log(scope);
        			this.scope = scope;
        			this.areaInfo.name = scope.row.segmentName;
        			this.areaInfo.areaName = scope.row.name;
        			this.areaInfo.areaId = scope.row.id;
        			this.dialogVisible1 = true;
        		},
        		del(scope){
        		},
        		handleCurrentChange(scope){
        			
        		},
        		getALLsegment(){
        			computedPostAlllSegment(this);
        		}
        },
        mounted(){
        	this.getALLsegment();/*获取全部网段*/
        	this.search();
        }
  };
</script>

<style >
 section.smartResourceManage{
 	padding: 15px;
 }
 @keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
</style>